<template>
  <div id="app">
    <div id="nav" v-show="!(path == '/login')">
      <el-row>
        <el-col :span="5"><div id="title">花友集聚地</div></el-col>
        <el-col :span="14" id="menubox">
          🌺<router-link to="/">Home主页</router-link> |
          🎈<router-link to="/post">Post发表</router-link>|
          🏠<router-link to="/shop">Shop商店</router-link>|
          🤪<router-link to="/mime">Mime我的</router-link>
        </el-col>
        <el-col :span="5"><div class="grid-content bg-purple">
          <el-avatar :src="avatar"></el-avatar>
          <button v-if="!loggedIn" @click="login">请登录</button>
          <a v-if="loggedIn">&nbsp欢迎你，{{ username }}！</a>
          <button v-if="loggedIn" @click="logout">退出</button>
        </div></el-col>
      </el-row>
    </div>
    <router-view style="padding-left: 50px; padding-right: 50px;"/>

    <el-footer style="height: auto; border-radius:0 0 10px 10px" v-show="!(path == '/login')">
        <a href="https://gitee.com/duan-add7/hhc-vue" target="_blank" style="color: white;">前端源码</a>&nbsp
        <a href="https://gitee.com/duan-add7/hhc" target="_blank" style="color: white;">后端源码</a>&nbsp
        <router-link v-show="limits == 1" :to="{path:'/admin'}" target="_blank" id="footLink">后台管理</router-link>
        <div style="text-align: right; color: white;">{{oDate}}{{oTime}} </div>
    </el-footer>
  </div>
  
</template>

<script>
import UserInfoApi from './api/mime/userinfo'

  export default {
    data() {
      return {
        path: '',
        loggedIn: false,
        username: '张三',
        avatar: '',
        limits: 0,

        oTime: '',
        oDate: '',
      }
    },
    methods: {
      getDou(number) {
          if(number < 10) {
              return '0' + number;
          } else {
              return number;
          }
      },
      getWeek(week) {
          var sWeek = null;
          switch(week) {
              case 0:
                  sWeek = '星期日'
                  break;
              case 1:
                  sWeek = '星期一'
                  break;
              case 2:
                  sWeek = '星期二'
                  break;
              case 3:
                  sWeek = '星期三'
                  break;
              case 4:
                  sWeek = '星期四'
                  break;
              case 5:
                  sWeek = '星期五'
                  break;
              case 6:
                  sWeek = '星期六'
                  break;
              default:
                  break;
          }
          return ' ' + sWeek;
      },
      tick() {
          var date = new Date();
          var sDate = null;
          var sTime = null;
          var hours = date.getHours();
          if(hours > 12) {
              hours %= 12;
              sTime = '下午 ';
          } else {
              sTime = '上午 ';
          }
          sTime += this.getDou(hours) + ':' + this.getDou(date.getMinutes()) + ':' + this.getDou(date.getSeconds());
          sTime += this.getWeek(date.getUTCDay());
          this.oTime = sTime;

          sDate = date.getUTCFullYear() + "年";
          if(date.getUTCMonth() < 9) {
              sDate += '0' + (date.getUTCMonth() + 1) + "月";
          } else {
              sDate += (date.getUTCMonth() + 1) + "月";
          }
          sDate += date.getUTCDate() + "日";
          this.oDate = sDate;
      },
      timer: function () {//写成timer()也可
     	this.tick();
     },


      login() {
        // 处理登录逻辑
        this.$router.push('/login')
      },
      logout() {
        this.$confirm('你确定要登出账号吗','提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(()=>{
          return UserInfoApi.logout()
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.message)
            localStorage.removeItem("authorization")
            this.loggedIn = false
            this.username = ''
          } else {
            this.$message.error(res.data.message);
          }
        }).catch(err => {
                if (err === 'cancel') {
                    this.$message.info('取消登出')
                }
            })
        
      },
      getLoginUser() {
        UserInfoApi.getLoginUser()
        .then(res => {
          if (res.data.code == 200) {
            this.loggedIn = true;
            this.limits = res.data.data.limits;
            this.username = res.data.data.nickName;
            this.avatar = res.data.data.avatar
          }
        })
      }
    },
    created() {
      this.getLoginUser();
      setInterval(this.timer, 1000); //定时器
    },
    // 判断路由
    mounted() {
      this.path = this.$route.path;
      // console.log(this.$route.path)

    },
    watch:{
        $route(to,from){
            this.path = to.path
            this.getLoginUser();
        },  
    }
  }
</script>

<style>
#hreflable {
  color: white;
  text-decoration: none;
}

#footLink{
  color: white;
}

.el-footer {
    background-color: #42b983;
    color: #333;
    text-align: left;
    line-height: 60px;
    margin-top: 50px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 10px;
  margin-bottom: 40px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}

#title {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  font-size: 36px;
  font-weight: bolder;
  color:#42b983;
}
#menubox{
  margin-top: 15px;
}
</style>
